<!DOCTYPE html>
<html lang="zh">
<head>
    <title>User Management</title>
    <link rel="stylesheet" type="text/css" th:href="@{/styles.css}">
</head>
<body>
<h1>User List</h1>
<a th:href="@{/user/add}">Add User</a>
<table class="user-table">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
    </tr>
    <!--${users}-->
    <tr th:each="user : ${users.content}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.email}"></td>
        <td>
            <a th:href="@{/user/edit/{id}(id=${user.id},page=${currentPage})}">Edit</a>
            <a th:href="@{/user/delete/{id}(id=${user.id})}">Delete</a>
        </td>
    </tr>
</table>
<div class="pagination">
    <a th:if="${currentPage > 0}" th:href="@{/user/(page=${currentPage - 1}, size=${size})}">Previous</a>
    <span th:each="i : ${#numbers.sequence(0, totalPages - 1)}">
        <a th:class="${currentPage == i} ? 'active' : ''" th:href="@{/user/(page=${i}, size=${size})}" th:text="${i + 1}"></a>
    </span>
    <a th:if="${currentPage < totalPages - 1}" th:href="@{/user/(page=${currentPage + 1}, size=${size})}">Next</a>
</div>
</body>
</html>